<template>
  <div class="app-container">
    <div style="margin-bottom:10px;">
      <el-select v-model="query.type" clearable style="margin-right:10px;" placeholder="请选择类型" class="filter-item" filterable @change="getdata">
        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.type" />
      </el-select>
      <el-select v-model="query.status" clearable style="margin-right:10px;" placeholder="请选择状态" class="filter-item" filterable @change="getdata">
        <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.type" />
      </el-select>
      <el-select v-model="query.yearMonth" clearable style="margin-right:10px;" placeholder="请选择绩效批次" class="filter-item" filterable @change="getdata">
        <el-option v-for="item in list" :key="item.id" :label="item.yearMonth" :value="item.yearMonth" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getInfo">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <el-table :cell-style="iscenter" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row border>
      <el-table-column label="状态" align="center" width="200px">
        <template slot-scope="{row,$index}">
          <span v-if="row.status==0" style="color:red">未填写</span>
          <span v-if="row.status==1" style="color:#ffb84d">未提交</span>
          <span v-else-if="row.status==2">完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="fromRealName" label="评价人" sortable />
      <el-table-column prop="yearMonth" label="绩效批次" sortable />
      <el-table-column prop="toUser" label="被评用户名" sortable />
      <el-table-column prop="toRealName" label="被评价人" sortable />
      <el-table-column prop="titleName" label="岗位" sortable />
      <!--<el-table-column prop="totalScore" label="分数" align="center" width="200px" sortable/>-->
      <el-table-column prop="type" label="类型" sortable>
        <template slot-scope="{row,$index}">
          <span v-if="row.type==1">主管</span>
          <span v-if="row.type==2">员工</span>
          <span v-else-if="row.type==3">上级</span>
          <span v-else-if="row.type==4">同级</span>
        </template>
      </el-table-column>
      <el-table-column label="重置" align="center">
        <template slot-scope="{row,$index}">
          <el-button
            size="mini"
            class="filter-item"
            type="primary"
            @click="chongzhi(row)"
          >重置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top:20px;"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { getInfo, chizhifun } from '@/api/completionStatus'
import { getInfo as gerInfor1 } from '@/api/managerPerformance'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Customerforecast',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      total: 0,
      list: [],
      status: [
        {
          type: 0,
          name: '未填写'
        },
        {
          type: 1,
          name: '未提交'
        }, {
          type: 2,
          name: '完成'
        }
      ],
      types: [
        {
          type: 1,
          name: '主管'
        },
        {
          type: 2,
          name: '员工'
        }, {
          type: 3,
          name: '上级'
        }, {
          type: 4,
          name: '同级'
        }
      ],
      currentPage: 1,
      pagesize: 10,
      dialogVisible: false,
      dialogType: 'new',
      total: 0,
      query: {
        pageIndex: 1,
        pageSize: 20,
        yearMonth: '',
        type: ''
      },
      tableData: []
    }
  },
  created() {
    this.getInfo()
    this.getpici()
  },
  mounted() {},
  methods: {
    iscenter({ row, column, rowIndex, columnIndex }) {
      if (row.status == 2 && row.totalScore < 60 && columnIndex !== 7) {
        return 'background:#ffc266;color:#000'
      } else if (row.status == 2 && row.totalScore >= 98 && columnIndex !== 7) {
        return 'background:  #ff704d;color:#000'
      }
    },
    chongzhi(row) {
      console.log(row)
      this.$confirm('提交后状态将会变为未提交，确认重置？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = {
          taskID: row.id
        }
        chizhifun(obj).then((res) => {
          // this.list=res.data
          if (res.isSuccess) {
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
            this.getInfo()
          } else {
            this.$message({
              type: 'error',
              message: res.message + '重置失败'
            })
          }
        })
      }).catch(err => {

      })
    },
    getpici() {
      gerInfor1().then((res) => {
        this.list = res.data
      })
    },
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    getInfo() {
      this.currentPage = 1
      getInfo(this.query).then((res) => {
        this.tableData = res.data
        this.total = res.data.length
      })
    }

  }
}

</script>
